<template>
  <div class="grey-cloth-repair">
    <!-- 当前疵点 -->
    <div v-if="flaw.data.length > 0" style="display: flex;flex-wrap: wrap;border: #96ff16 solid 2px;margin-top: 1vh;padding: 1vh 1vw;">
      <van-tag style="margin-right: 1vw;margin-bottom: 1vh;height: 5vh;font-size: 1.2rem;" closeable v-for="tag in flaw.data" @close="delFlawFn(tag)">
        {{ tag.flaw + SPLIT_SPACE + (tag.pos != SPLIT_BLANK ? ("长度(米):" + tag.pos + SPLIT_SPACE) : SPLIT_BLANK) + (tag.hours != SPLIT_BLANK ? ("时长(小时):" + tag.hours) : SPLIT_BLANK) }}
      </van-tag>
    </div>

    <!-- 疵点列表 -->
    <div style="display: flex;flex-wrap: wrap;border: #1677ff solid 2px;margin-top: 1vh;padding: 1vh 1vw;">
      <van-button style="flex: 0 0 10vw;margin-right:2vw; margin-bottom: 1vh;font-size: 1.5rem" :color="btn.color" v-for="btn in flaw.btnArr" @click="showDetailFn(btn)">{{ btn.text }}</van-button>
    </div>

    <!-- 之前疵点 -->
    <div style="border: #ff5c16 solid 2px;margin-top: 1vh;padding: 1vh 1vw;">
      <van-tree-select :items="stepFlaw.steps" :main-active-index.sync="stepFlaw.active" @click="changeStepFn">
        <template #content>
          <div style="display: flex;flex-wrap: wrap;padding: 1vh 1vw">
            <van-tag style="margin-right: 1vw;margin-bottom: 1vh;height: 3.5vh;font-size: 1.2rem;" size="large" type="primary" v-for="tagObj in stepFlaw.data">
              {{ tagObj.flaw + SPLIT_SPACE + "位置:" + tagObj.pos + "米" }}
            </van-tag>
          </div>
        </template>
      </van-tree-select>
    </div>

    <!-- 疵点详情 -->
    <van-popup :style="{padding: '1vh 1vw',width: '30vw',height: '35vh',top: popTop}" style="padding: 1vh 1vw;width: 30vw;height: 35vh;" v-model="detail.show" :round="true" closeable :close-on-click-overlay="false">
      <div style="text-align: center;font-size: 2rem;font-weight: bolder;color: #1677ff">
        <span>{{ detail.flaw }}</span>
      </div>
      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field v-model="detail.pos" type="number" placeholder="请输入" label="长度" clearable @focus="beginEditFn" @blur="endEditFn"></van-field>
      <van-field v-model="detail.hours" type="number" placeholder="请输入" label="时长(小时)" clearable @focus="beginEditFn" @blur="endEditFn"></van-field>

      <div style="margin-top:3vw;display: flex;justify-content: center;">
        <van-button style="width: 10vw;" type="danger" @click="detail.show=false">取消</van-button>
        <van-button style="width: 10vw; margin-left: 5vw;" type="primary" @click="addFlawFn">确认</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { loadFlawByTaskData, loadFlawConfigData} from "@/api/flaws";
import {randomColor} from "@/utils/common";
import {SPLIT_BLANK, SPLIT_COLON, SPLIT_SPACE} from "@/utils/enum";

export default {
  name: "greyClothRepair",
  props: {
    params: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      SPLIT_COLON, SPLIT_BLANK, SPLIT_SPACE,

      /* 疵点 */
      flaw: {
        taskId: 0,
        curBtn: null,
        btnArr: [],
        data: [],
      },

      /* 其他环节疵点 */
      stepFlaw: {
        active: 0,
        steps: [],
        data: [],
      },

      /* 疵点弹窗 */
      detail: {
        show: false,
        flaw: SPLIT_BLANK,
        pos: SPLIT_BLANK,
        hours: SPLIT_BLANK,
      },
      popTop: "30vh"    //弹窗位置
    }
  },
  mounted() {
    const that = this;
    //加载疵点配置
    that.flaw.taskId = that.params.taskId;
    loadFlawConfigData({
      type: 1
    }, data => {
      data.forEach(flaw => {
        that.flaw.btnArr.push({
          text: flaw,
          color: randomColor(1),
        });
      });
    });

    //加载环节疵点
    loadFlawByTaskData({
      taskId: that.params.taskId
    }, data => {
      data.forEach((item, index) => {
        item.active = index;
        item.text = item.stepName;
        that.stepFlaw.steps.push(item);
      });

      that.changeStepFn(0);
    });
  },
  methods: {

    /* 显示详情 */
    showDetailFn(btn) {
      const that = this;
      that.detail.flaw = btn.text;
      that.detail.show = true;
    },

    /* 增加疵点 */
    addFlawFn() {
      const that = this;
      that.flaw.data.push({
        flaw: that.detail.flaw,
        pos: that.detail.pos == SPLIT_BLANK ? 0 : that.detail.pos,
        hours: that.detail.hours == SPLIT_BLANK ? 0 : that.detail.hours,
      });
      that.detail.show = false;
    },

    /* 删除疵点 */
    delFlawFn(tag) {
      const that = this;
      const index = that.flaw.data.findIndex(t => t == tag);
      if(index != -1) {
        that.flaw.data.splice(index, 1);
      }
    },

    /* 切换环节 */
    changeStepFn(active) {
      const that = this;
      that.stepFlaw.data.splice(0, that.stepFlaw.steps);
      const flawObjArr = that.stepFlaw.steps.filter(step => step.active == active);
      if(flawObjArr.length > 0) {
        flawObjArr[0].flawList.forEach(tagObj => {
          that.stepFlaw.data.push(tagObj);
        });
      }
    },

    beginEditFn() {
      // const that = this;
      // that.popTop = "30vh";
    },
    endEditFn() {
      // const that = this;
      // that.popTop = "50vh";
    },

    /* 获取疵点数据 */
    getFlawDataFn() {
      const that = this;
      let result = SPLIT_BLANK;
      if(that.flaw.data.length > 0) {
        result = JSON.stringify(that.flaw.data);
      }
      return result;
    },

    /* 获取历史疵点数据 */
    getStepFlawDataFn() {
      const that = this;
      if(that.stepFlaw.steps.length > 0) {
        return that.stepFlaw.steps[0].flawList;
      }
      return [];
    }
  }
}
</script>

<style lang="scss" scoped>
.grey-cloth-repair {
  ::v-deep .van-tree-select {
    height: auto !important;
    .van-sidebar {
      flex: 0 0 15vw;
      .van-sidebar-item {
        .van-sidebar-item__text {
          font-size: 1.2rem;
        }
      }
    }
    .van-tree-select__content {
      flex: 0 0 80vw;
    }
  }

  ::v-deep .van-tag {
    .van-tag__close {
      margin-left: 2vw !important;
      margin-top: 4vh !important;
    }
    .van-icon-cross:before {
      font-size: 1.3rem;
    }
  }
}
</style>